<%--
  Created by IntelliJ IDEA.
  User: Adminis
  Date: 2025/3/19
  Time: 11:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/home/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/home/js/bootstrap.min.js"></script>
    <style>
        body {
            background-image: url("${pageContext.request.contextPath}/home/images/Kitty2.png");
            background-size: cover;
            background-repeat: no-repeat;
        }

        label {
            font-size: 16px;
            color: #fffafa;
        }

        #thmym {
            margin: 0 auto;
            width: 800px;
            height: 500px; /* 调整高度以适应更多内容 */
            padding-top: 20px;
            padding-left: 50px;
            padding-right: 50px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50px;
            transition: box-shadow 0.3s ease; /* 添加过渡效果 */
        }

        #thmym:hover {
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); /* 鼠标划过时的发光效果 */
        }

        #denglu {
            text-decoration: none;
            color: aqua;
            font-size: 18px; /* 文字变大 */
        }

        #denglu:hover {
            color: #0385ff;
        }

        .form-control {
            background-color: rgba(255, 255, 255, 0.1);
            color: #fffafa;
            border: 1px solid #fffafa;
        }

        .form-control:focus {
            background-color: rgba(255, 255, 255, 0.2);
            border-color: #fffb13;
            outline: none;
        }

        .hyzc {
            font-size: 28px;
            font-weight: 800;
            color: wheat;
            text-align: center;
            font-family: 'Roboto', sans-serif; /* 使用Google Fonts中的Roboto字体 */
            transition: text-shadow 0.3s ease; /* 添加过渡效果 */
        }

        .hyzc:hover {
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); /* 鼠标划过时的发光效果 */
        }

        .gotodl {
            text-decoration: none;
            display: inline-block;
            width: 200px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            background: aqua;
            font-size: 12px;
            color: rgb(65, 126, 126);
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="container" style="margin-top: 10%;">
    <div id="thmym">
        <div id="register">
            <form class="was-validated" action="${pageContext.request.contextPath}/user/userRegister" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
                <p class="hyzc">欢迎注册</p>
                <div class="row">
                    <!-- 用户名 -->
                    <div class="col-sm-6">
                        <label for="user_name" class="form-label">用户名:</label>
                        <input type="text" class="form-control" id="user_name" name="user_name" required>
                    </div>
                    <!-- 密码 -->
                    <div class="col-sm-6">
                        <label for="password" class="form-label">密码:</label>
                        <input type="password" class="form-control" id="password" name="user_pass" required>
                    </div>
                </div>
                <br>

                <div class="row">
                    <!-- 手机号 -->
                    <div class="col-sm-6">
                        <label for="user_phone" class="form-label">手机号:</label>
                        <input type="text" class="form-control" id="user_phone" name="user_phone" required>
                    </div>
                    <!-- 确认密码 -->
                    <div class="col-sm-6">
                        <label for="onpass" class="form-label">确认密码:</label>
                        <input type="password" class="form-control" id="onpass" required>
                    </div>
                </div>
                <br>

                <!-- 生日 -->
                <div class="row">
                    <div class="col-sm-6">
                        <label for="user_birthday" class="form-label">生日:</label>
                        <input type="date" class="form-control" id="user_birthday" name="user_birthday" required>
                    </div>
                    <div class="col-sm-6">
                        <label for="image" class="form-label">头像:</label>
                        <input class="form-control" type="file" id="image" name="image" required>
                    </div>
                </div>
                <br>

                <p></p>

                <div class="row">
                    <div class="col-sm-4">
                        <button type="submit" class="btn btn-primary btn-sm btn-block btn-success">注册</button>
                    </div>
                    <div class="col-sm-4">
                        <button type="reset" class="btn btn-primary btn-sm btn-block btn-warning">重置</button>
                    </div>
                    <div class="col-sm-4">
                        <a class="gotodl" href="${pageContext.request.contextPath}/homepage/toHomeLogin">去登陆</a>
                    </div>
                </div>


            </form>
        </div>
    </div>
</div>
</body>
</html>


<script>    // 禁用浏览器默认的提交行为
function validateForm() {
    console.log("禁用浏览器默认的提交行为")

    console.log(document.getElementById("user_phone").value.length)
    if (document.getElementById("user_phone").value.length !== 11) {
        alert("手机号格式有误!!!");
        return false;
    }

    if (document.getElementById("password").value !== document.getElementById("onpass").value) {
        alert("两次密码输入不一致!!!");
        return false;
    }
    return true;
}
</script>